<template>
    <div>
        <!--面包屑-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>角色列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!---卡片试图---->
        <el-card>
            <!----->
            <el-row>
                <el-col>
                    <el-button type="primary">添加角色</el-button>
                </el-col>
            </el-row>
            <!---角色列表--->
            <el-table :data="roleList" border stripe>
                <el-table-column type="expand">
                    <template slot-scope="scope">
                        <el-row :class="['bdbottom',i1===0?'bdtop':'','vcenter']" v-for="(item1,i1 ) in scope.row.children" :key="item1.id">
                            <!---一级--->
                            <el-col :span="5">
                                <el-tag @close="removeRightById(scope.row,item1.id)" closable>{{item1.authName}}</el-tag>
                                <i class="el-icon-caret-right"></i>
                            </el-col>
                            <!---二级和三级---->
                            <el-col :span="19">
                                <el-row v-for="(item2,i2) in item1.children" :key="item2.id" :class="[i2===0?'':'bdtop','vcenter']">
                                    <el-col :span="6">
                                        <el-tag type="success" @close="removeRightById(scope.row,item2.id)" closable>{{item2.authName}}</el-tag>
                                        <i class="el-icon-caret-right"></i>
                                    </el-col>
                                    <el-col :span="18">
                                        <el-tag v-for="(item3) in item2.children" :key="item3.id"  type="warning" closable @close="removeRightById(scope.row,item3.id)">
                                            {{item3.authName}}
                                        </el-tag>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
                <el-table-column type="index"></el-table-column>
                <el-table-column label="角色名称" prop="roleName"></el-table-column>
                <el-table-column label="角色描述" prop="roleDesc"></el-table-column>
                <el-table-column label="操作" width="300">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
                        <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
                        <el-button type="warning" icon="el-icon-setting" size="mini" @click="showSetRightDialog(scope.row)">分配权限</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!----分配权限----->

        <el-dialog title="分配权限" :visible.sync="setRightialogVisible"
  width="50%" @close="setRightDialogClosed">
          <el-tree :data="rightsList" :props="treeProps" show-checkbox node-key="id" default-expand-all :default-checked-keys="defkeys" ref="treeRef"></el-tree>
          <span slot="footer" class="dialog-footer">
            <el-button @click="setRightialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="allotRights">确 定</el-button>
          </span>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                roleList: [],
                setRightialogVisible:false,
                rightsList:[],
                treeProps:{
                    label:'authName',
                    children:'children'
                },
                defkeys:[],
                roleId:''
            }
            
        },
        created() {
            this.getRolesList()
        },
        methods:{
            async getRolesList() {
                const {data: res} = await this.$http.get('roles')
                if(res.meta.status !== 200){
                    return this.$message.error('获取失败')
                }
                this.roleList = res.data
               
            },
            async removeRightById(role,righId){
                const confirmResult = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).catch(err => err)
                if(confirmResult !== 'confirm'){
                    return this.$message.info('取消了删除')
                } 
                const{data:res} = await this.$http.delete(`roles/${role.id}/rights/${righId}`)
                if(res.meta.status !== 200){
                    return this.$message.error('删除失败')
                }
                role.children = res.data
               
            },
            async showSetRightDialog(role){
                this.roleId = role.id
                const{data:res} = await this.$http.get('rights/tree')
                if(res.meta.status !== 200){
                    return this.$message.error('弹出对话框失败')
                }
                this.rightsList = res.data
                this.getLeafKeys(role,this.defkeys)
                this.setRightialogVisible = true
            },
            getLeafKeys(node,arr){
                if(!node.children){
                    return arr.push(node.id)
                    
                }
                node.children.forEach(item=>
                    this.getLeafKeys(item,arr)
                )
            },
            setRightDialogClosed(){
                this.defkeys = []
            },
            async allotRights() {
                const keys = [
                    ...this.$refs.treeRef.getCheckedKeys(),
                    ...this.$refs.treeRef.getHalfCheckedKeys()
                ]
                const idStr = keys.join(',')
                const{data:res} = await this.$http.post(`roles/${this.roleId}/rights`,{rids:idStr})
                if(res.meta.status!==200){
                    return this.$message.error('分配权限制作')
                }
                this.$message.success('分配权限成功')
                this.getRolesList()
                this.setRightialogVisible = false
            }
        }
        
    }
</script>
<style lang="less" scoped>
.el-tag{
    margin: 7px;
}
.bdtop {
    border-top:1px solid #eee;
}
.bdbottom{
    border-bottom: 1px solid #eee;
}
.vcenter{
  display:flex;
  align-items:center;
}
</style>